<template>
  <div class="home">
    <el-container>
		<el-aside :width="fold?'64px':'200px'" class="left">
			<h3 v-text="fold?'成绩':'成绩管理系统'" :style="{paddingLeft:fold?'5px':'20px'}"></h3>
			<el-menu
				:default-active="path"
				class="el-menu-vertical-demo"
				:unique-opened="true"
				:router="true"
				:collapse="fold"
				background-color="#545c64"
				text-color="#fff"
				@select="selectMenu"
				active-text-color="#ffd04b">
				<el-submenu index="1">
					<template slot="title">
						<i class="el-icon-s-data"></i>
						<span>成绩管理</span>
					</template>
					<el-menu-item index="/grade/classGradeManage">班级成绩管理</el-menu-item>
					<el-menu-item index="/grade/peasonGradeManage">个人成绩管理</el-menu-item>
					<el-menu-item index="/grade/classGradeList">班级成绩查询</el-menu-item>
				</el-submenu>
				<el-submenu index="2">
					<template v-slot:title>
						<i class="el-icon-setting"></i>
						<span>系统设置</span>
					</template>
					<el-menu-item index="/course/manage">课程管理</el-menu-item>
					<el-menu-item index="/banji">班级管理</el-menu-item>
					<el-menu-item index="/student">学生管理</el-menu-item>
				</el-submenu>
			</el-menu>
		</el-aside>
      <el-container class="right">
        <el-header>
			<el-button type="text" style="font-size: 1.5rem;" size="large" :icon="fold?'el-icon-s-unfold': 'el-icon-s-fold'" @click="foldhandler"></el-button>
			<div style="display: inline-block;float: right;">
				<!-- 欢迎你：<span v-text="name"></span> -->
				欢迎你：
				<el-dropdown @command="handleSelect">
					<span class="el-dropdown-link">
						{{name}}<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item command="a">修改密码</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<el-button type="text" @click="logout" icon="el-icon-switch-button" size="medium" style="margin-left: 0.625rem;font-size: 1em;">注销</el-button>
			</div>
		</el-header>
        <el-main>
			<router-view ></router-view>
		</el-main>
		<el-footer>
			<div style="text-align: center;">copyright © 2020-2025 tgc.edu.ljc,All Rights Reserved </div>
		</el-footer>
      </el-container>
    </el-container>
	<el-dialog :visible.sync="dialogDisable" title="修改密码" width="30%" >
		<el-form :model="form" :rules="rules" ref="pwd" label-width="80px">
			<el-form-item prop="oldPwd" label="旧密码">
				<el-input v-model="form.oldPwd" show-password placeholder="请输入旧密码"/>
			</el-form-item>
			<el-form-item prop="newPwd" label="新密码">
				<el-input v-model="form.newPwd" show-password placeholder="请输入新密码"/>
			</el-form-item>
			<el-form-item prop="pwd2" label="密码确认">
				<el-input v-model="form.pwd2" show-password placeholder="请再次输入新密码"/>
			</el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button type="primary" @click="changePwd">确定</el-button>
			<el-button @click="dialogDisable=false">放弃</el-button>
		</span>
	</el-dialog>
  </div>
</template>

<script>
export default {
	data() {
		var checkPwd=(rule,value,callback)=>{
			if(!value){
				return callback('密码确认不能为空');
			}
			setTimeout(()=>{
				if(value!==this.form.newPwd){
					return callback('两次输入的新密码不一致');
				}else{
					callback();
				}
			},100);
		}
		return {
			fold: false,
			dialogDisable:false,
			form:{
				oldPwd:'',
				newPwd:'',
				pwd2:''
			},
			rules:{
				oldPwd:[{required:true,message:'旧密码不能为空',trigger:'blur'}],
				newPwd:[{required:true,message:'新密码不能为空',trigger:'blur'}],
				pwd2:[{validator:checkPwd,trgger:'blur'}]
			}
			// path:'/course/manage'
		}
	},
  methods:{
	foldhandler(){
		if(this.fold){
			this.fold=false;
		}else{
			this.fold=true;
		}
	},
	changePwd(){
		this.$ajax.post('changePwd',this.form).then(res=>{
			var result=res.data;
			if(result.success){
				this.$ajax.post('logout',{}).then(res=>{
					var result2=res.data;
					sessionStorage.removeItem("token");
					sessionStorage.removeItem("name");
					this.$router.replace('/');
					this.$notify.success({message:result2.msg,position:'bottom-right'});
				})
			}else{
				this.$message.warning(result.msg);
			}
		})
	},
	handleSelect(){
		this.dialogDisable=true;
	},
	logout(){
		sessionStorage.removeItem("token");
		sessionStorage.removeItem("name");
		sessionStorage.removeItem("path");
		this.$router.replace('/');
	},
	selectMenu(index){
		sessionStorage.setItem("path",index);
	}
  },
  computed:{
	name(){
		var name=sessionStorage.getItem("name");
		return name?name:'';
	},
	path(){
		var path=sessionStorage.getItem("path");
		return path?path:'/course/manage'
	}
  },
  mounted() {
	// this.path=sessionStorage.getItem("path");
	// console.log(this.path);
  }
}
</script>
<style scoped>
.home {
	min-height: 100vh;
	
}
.left{
	background-color: #333333;
}
.left>h3{
	color: wheat;
	padding-left: 1.5rem;
	margin-block-start: 0.94em;
	margin-block-end: 0.94em;
}
.el-menu {
	border-right: 0;
	min-height: calc(100vh - 60px);
	height: calc(100% - 60px);
}
.el-header, .el-footer {
	background-color: #B3C0D1;
	color: #333;
	/* text-align: center; */
	line-height: 60px;
}
.right {
	/* height: 100vh; */
}
.main2 {
	min-height: calc(100% - 5px);
}
.el-dropdown-link {
	cursor: pointer;
	color: #409EFF;
}
.el-icon-arrow-down {
	font-size: 12px;
}
</style>